<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from "./components/HelloWorld.vue";
import axios from "axios";
import { onBeforeMount, onMounted, reactive } from "vue";
const state = reactive({
  tableHeader: ["图片", "标题", "内容", "时间", "操作"],
  list: [],
  pageIndex: 1,
  total: 1,
  title: "",
  content: "",
});
let getList = () => {
  let params = {
    // name: 123,  //mock 默认是url带参数解析的，
  };
  axios.get("/api/get/news", { params }).then((res) => {
    state.list = res.data;
  });
};
let postList = () => {
  let data = { id: 1 };
  axios.post("/api/post/news", { data }).then((res) => {
    state.list = res.data;
  });
};
//  增加新闻
let add = () => {
  console.log(state.title, state.content);
  if (state.title.trim() === "" || state.content.trim() === "") return;
  axios
    .post("/api/add/news", {
      title: state.title,
      content: state.content,
    })
    .then((res) => {
      console.log(res);
      getNewsList();
    });
};
// 删除新闻
let remove = (id) => {
  console.log(id);
  if (!id) return;
  axios
    .post("/api/delete/news", {
      id,
    })
    .then((res) => {
      console.log(res);
      getNewsList();
    });
};
// 获取新闻列表数据
let getNewsList = (pageIndex = 1, pageSize = 10) => {
  if (pageIndex <= 1) {
    pageIndex = 1;
  }
  if (pageIndex >= Math.ceil(state.total / pageSize)) {
    pageIndex = Math.ceil(state.total / pageSize);
  }
  state.pageIndex = pageIndex;
  axios
    .get("/api/get/news", {
      params: {
        pageIndex: pageIndex,
        pageSize: pageSize,
      },
    })
    .then((res) => {
      state.list = res.data.list;
      state.total = res.data.total;
    });
};
let prevPage = (num) => {
  state.pageIndex += num;
  console.log(state.pageIndex, num);
  getNewsList(state.pageIndex);
};
onBeforeMount: {
  getNewsList();
}
</script>

<template>
  <h2>vue3+mockjs</h2>
  <!-- 搜索 -->
  <div class="add">
    <input
      type="text"
      name=""
      id=""
      v-model="state.title"
      placeholder="请输入标题"
    >
    <input
      type="text"
      name=""
      id=""
      v-model="state.content"
      placeholder="请输入内容"
    >
    <button @click="add">添加</button>
  </div>
  <!-- 表格 -->
  <div class="news-list">
    <table>
      <tr>
        <th
          v-for="item of state.tableHeader"
          :key="item"
        >{{item}}</th>
      </tr>
      <tr
        v-for="item in state.list"
        :key="item.id"
      >
        <td><img
            :src="item.img_url"
            alt=""
          ></td>
        <td>{{item.title}}</td>
        <td>{{item.content}}</td>
        <td>{{item.created_time}}</td>
        <td><button
            class="remove"
            @click="remove(item.id)"
          >删除</button></td>
      </tr>
    </table>
  </div>
  <!-- 上下页 -->
  <div class="pages">
    <button @click="prevPage(-1)">上一页</button><button
      @click="prevPage(+1)">下一页</button>
  </div>
  <hr>
  <!-- <div>get请求的数据：{{state.list}}</div>
  <input
    type="button"
    value="getList"
    @click="getList"
  >
  <div>post请求的数据：{{state.list}}</div>
  <input
    type="button"
    value="postList"
    @click="postList"
  > -->
  <!-- <img
    alt="Vue logo"
    src="./assets/logo.png"
  /> -->
  <!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
.add {
  text-align: left;
}
.add input {
  border-radius: 5px;
  border: none;
  outline: none;
  border: 1px solid #999;
  padding: 5px;
  margin-right: 10px;
}
.add button {
  width: 100px;
  height: 30px;
  background: #409eff;
  color: #fff;
  outline: none;
  border-radius: 5px;

  cursor: pointer;
  border: 0;
}
.pages button {
  width: 100px;
  height: 30px;
  margin-left: 10px;
  cursor: pointer;
  background: #409eff;
  color: #fff;
  border: 0;
}
.news-list {
  min-width: 960px;
  max-height: 495px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 10px;
}
.news-list table {
  border-collapse: collapse;
  max-height: 495px;
  margin: 10px;
  border: 1px solid rgb(94, 92, 92);
}
.news-list th {
  font-size: 16px;
  height: 30px;
  width: 224px;
  font-weight: normal;
  border: 1px solid rgb(94, 92, 92);
}
.news-list td {
  font-size: 12px;
  padding: 5px;
  border: 1px solid rgb(94, 92, 92);
}
.news-list td:nth-child(2) {
  min-width: 60px;
}
.news-list td:nth-child(3) {
  min-width: 400px;
  text-align: left;
}
.news-list td:nth-child(4) {
  width: 60px;
}
.news-list img {
  width: 80px;
  height: 80px;
}
.news-list .remove {
  background: #f56c6c;
  height: 30px;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  border: 0;
}
</style>
